<!-- 一开始的时候为什么我有用原生js的想法写！教训啊 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confession</title>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/animate.min.css">
    <link rel="stylesheet" href="../css/style.css?version=1.3">
    <link rel="stylesheet" href="../css/christmas.css?version=1.0">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/moment.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/swiper.animate1.0.3.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/email.min.js"></script>

</head>
<body>
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!-- 第一次表白 -->
                <div class="swiper-slide" style="padding: 15px;">
                    <div class="letter-background"></div>
                    <p class="ani text-box" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">
                        Hi!亲爱的高嘉（小猪）同学：
                    </p>
                    <p class="ani text-box" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是的我正在给你写封情书！下面的话来自我的内心的深处<br>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无法忘记我们相遇的那一晚，那一晚奇妙又难忘并深深的留在我心底。我起初并不知道你是一个快乐优秀的小猪，只看到你的勇敢和美丽，在我们一次又一次的见面、一天又一天的聊天，我的感情经历了初好感到喜欢，你就像自由散漫的凉风，永远能治愈我的坏心情，希望我也可以治愈你。你的出现我的快乐达到了峰值，我对生活再充满能量。但是我却发现我沦陷在这一片大海中，因为我找到了我的美人鱼...<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;怎么会有这么好看的人<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;怎么会有这么可爱的人<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;怎么会有这么吧啦吧啦说不停的人<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;怎么会有这么遵守交通规则的人<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;怎么会有这么勤俭持家的人<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;怎么会有这么棒的人<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我怎么这么喜欢这个人！<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我想要我们一起吃饭 散步 看日出 看海 看日落 相拥 合影...如果可以还想跟你坠入爱河，相爱永恒！<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;和你相遇已经很幸运<br>
                        </span>
                    </p>
                    <p class="ani text-box letter-footer" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s">
                        <span class="luokuan">2021-8-21</span>
                        <span class="luokuan">赵会祥&nbsp;&nbsp;</span>
                    </p>
                    <img src="../img/hand.png" alt="" class="hand-box">
                </div>
                <!-- 一周年 -->
                <div class="swiper-slide" style="padding: 15px;">
                    <div class="letter-background"></div>
                    <p class="ani text-box" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">
                        Hi!我亲爱的嘉嘉：
                    </p>
                    <p class="ani text-box" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;耶！我们已经在一起一年了！<br>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这一年中我们之间的感情从青涩到浓厚、从试探的拉手到下意识地拉你、从轻轻的抱抱到深深的抱抱、从闭着眼睛亲吻到可以对视亲吻、从衣衫得体到衣衫不整，都是因为你是我最亲密的爱人<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你会体贴懂事，也会撒娇粘人不讲道理，不愧是百变小猪，但是我都爱。你总是问我"是否爱你"，其实我的心里早已经说了一百遍爱你，以后不要再怀疑了。和你在一起后我们的相处真的的很舒服，这也是我更加爱你的原因<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今年你见了我的父母，我去见了你的父母，他们之间有了莫名的默契，互相认可了你和我。虽然嘴上说着想跟你快点定亲、结婚，但是只要那个人是你就可以，其他的无所谓了<br>
                        </span>
                        <span class="text-box-span">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期待我们的下一个周年、十周年、五十周年...和你在一起真是觉得时间不够呢<br>
                        </span>
                    </p>
                    <p class="ani text-box letter-footer" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s">
                        <span class="luokuan">2022-8-21</span>
                        <span class="luokuan">赵会祥&nbsp;&nbsp;</span>
                    </p>
                    <img src="../img/hand.png" alt="" class="hand-box">
                </div>
                <!-- 信封 -->
                <div class="swiper-slide">
                    <div class="letter-background2"></div>
                    <p class="ani textOld" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" >
                        在古代，常常用写信来传达彼此之间的思念关怀之情，所以如果想抒发情绪，可以随时发给我（比如...现在呢？），我随时可以接收到来自小猪的信号(滋滋滋...)。
                    </p>
                    <!-- 邮箱HTML -->
                    <form id="email-form" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                        <input type="hidden" name="name">
                        <div class="form-item-box">
                            <p class="english-text">Your name:</p>
                            <input type="text" autocomplete="off" name="your_name" v-model="form.name" placeholder="あなたの名前">
                        </div>
                        <div class="form-item-box">
                            <p class="english-text">Message:</p>
                            <textarea name="message" v-model="form.message" rows="8" placeholder="私と話したいこと"></textarea>
                        </div>
                        <p class="tips">（*两项信息填写完后可点击发送）</p>
                    </form>
                    <button type="button" id="tijiao" :disabled="submitDisabled">
                        发送至小X
                        <img src="../img/send.png" alt="send">
                    </button>
                </div>
                <!-- 第三页 -->
                <div class="swiper-slide">
                    <div class="letter-background2"></div>
                    <p>不定期更新  尽情期待</p>
                    <div class="get-into jump-anniversary" @click="anniversaryClick()">
                        <div class="ripple"></div>
                        纪念馆
                    </div>
                </div>
            </div>
        </div>

        <div id="loading-tip-box">
            <div class="loading-tip">
                <div class="christmas-box" v-if="christmasData.isShow">
                    <img src="../img/christmas/christmas-hat.png" alt="#" class="christmas-hat">
                    <img src="../img/christmas/christmas-snowman.png" alt="#" class="christmas-snowman">
                    <img src="../img/christmas/christmas-tree.png" alt="#" class="christmas-tree">
                    <img src="../img/christmas/christmas-sweet.png" alt="#" class="christmas-sweet">
                    <img src="../img/christmas/christmas-love.png" alt="#" class="christmas-love">
                    <img src="../img/christmas/christmas-gift.png" alt="#" class="christmas-gift">
                    <img src="../img/christmas/christmas-Toy.png" alt="#" class="christmas-toy">
                    <img src="../img/christmas/christmas-Toy2.png" alt="#" class="christmas-toy2">
                    <img src="../img/christmas/christmas-bell.png" alt="#" class="christmas-bell">
                    <img src="../img/christmas/christmas-ball.png" alt="#" class="christmas-ball">
                    <img src="../img/christmas/christmas-zhang.png" alt="#" class="christmas-zhang">
                    <img src="../img/christmas/christmas-red.png" alt="#" class="christmas-red">
                </div>

                <img src="../img/pig.png" alt="#" class="pang-pang">
                <div class="shadow-box"></div>
                <div class="loading-box">
                    <div class="loading">
                        <img src="../img/metro.png" alt="#" class="loading-img">
                        <img src="../img/star.png" alt="#" class="loading-img-stars1">
                        <img src="../img/star.png" alt="#" class="loading-img-stars2">
                        <img src="../img/star.png" alt="#" class="loading-img-stars3">
                    </div>
                    <img src="../img/QDMetroLine3.png" alt="#" class="no3">
                </div>

                <div class="index-btn" ref="indexBtn">
                    <div class="get-into" @click="anniversaryClick()">
                        <div class="ripple"></div>
                        纪念馆
                    </div>
                    <div class="get-into into" ref="into">
                        <div class="ripple"></div>
                        进入
                    </div>
                </div>
            </div>
        </div>

        <!-- 滋滋滋 -->
        <div v-show="zizizi" class="zizizi">
            <div class="electric-loading-box">
                <img src="../img/electric.png" alt="pika">
                <span class="electric-loading">......</span>
            </div>
        </div>
        <div class="sucess-box" v-show="succesType">
            发送成功
        </div>
        <div class="sucess-box" v-show="errorType">
            {{errorMsg}}
        </div>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                submitDisabled: true,
                zizizi: false,
                succesType: false,
                errorType: false,
                errorMsg: "",
                form:{
                    name: "",
                    message: "",
                },
                christmasData: {
                    isShow: false,
                    date: ['12-21', '12-22', '12-23', '12-24', '12-25'],
                },
                newYearData: {
                    isShow: false,
                    date: ['12-30', '12-31', '01-01', '01-02', '01-03'],
                },
            },
            created(){
                console.log(this.christmasData.date.some( el => el == moment(new Date()).format('MM-DD') ))
                this.christmasData.isShow = this.christmasData.date.some( el => el == moment(new Date()).format('MM-DD') ); 
                this.newYearData.isShow = this.newYearData.date.some( el => el == moment(new Date()).format('MM-DD') ); 
            },
            mounted(){

            },
            methods:{
                anniversaryClick(){
                    window.location.href = "./anniversary.html";
                },
            },
            watch:{
                form:{
                    handler(val){
                        if(val.name && val.message){
                            this.submitDisabled = false;
                        }else{
                            this.submitDisabled = true;
                        }
                    },
                    deep:true
                }
            }
        })
    </script>
    
    <script>
        function isMobile(){
            let info = navigator.userAgent;
            let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
            for(let i = 0; i < agents.length; i++){
                if(info.indexOf(agents[i]) >= 0) return true;
            }
            return false;
        }

        window.onload = function(){
            // 移动端显示内容，PC暂不支持。
            // if(!isMobile()){
                
            // }else{
                // img是否加载完  (complete)
                // if( document.getElementsByClassName("loading-img")[0].complete ){

                // }
                
                // 显示loading-tip
                let loadingDOM = document.getElementById("loading-tip-box");

                setTimeout(_=>{
                    // 地铁滑动
                    document.getElementsByClassName("loading")[0].style.width = "100%";
                    setTimeout(_=>{
                        // 显示进入
                        app.$refs.indexBtn.style.top = "80%";
                    },3500)
                },100);
                
                let getInto = document.getElementsByClassName('into')[0];
                getInto.addEventListener('click', function(e) {
                    let self = $(this);
                    self.addClass("get-into-new");
                    setTimeout(_=>{
                        document.getElementById("loading-tip-box").setAttribute("style", "height: 0px; opacity: 0;");
                        self.removeClass("get-into-new");
                    },300);

                    setTimeout(_=>{
                        document.getElementById("loading-tip-box").setAttribute("style", "display: none;")
                    },600);

                    //  初始化swiper
                    var mySwiper = new Swiper('.swiper-container', {
                        on: {
                            init: function () {
                                swiperAnimateCache(this); //隐藏动画元素
                                swiperAnimate(this); //初始化完成开始动画
                            },
                            slideChangeTransitionEnd: function () {
                                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                                // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); // 动画只展现一次，去除ani类名
                            }
                        },
                        autoplay: 5000,//可选选项，自动滑动
                        direction: 'vertical',// 垂直
                    });
                })
            }
        // }

        // //  初始化swiper
        // var mySwiper = new Swiper('.swiper-container', {
        //     on: {
        //         init: function () {
        //             swiperAnimateCache(this); //隐藏动画元素
        //             swiperAnimate(this); //初始化完成开始动画
        //         },
        //         slideChangeTransitionEnd: function () {
        //             swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
        //             // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); // 动画只展现一次，去除ani类名
        //         }
        //     },
        //     autoplay: 5000,//可选选项，自动滑动
        //     direction: 'vertical',// 垂直
        // });
    </script>
    
    <!-- 邮件发送 start -->
    <script type="text/javascript" src="../js/email.min.js"></script>
    <script type="text/javascript">
        (function() {
            // https://dashboard.emailjs.com/admin/integration
            emailjs.init('user_u3x3wLVELYAfZZf1XbuzH');
        })();
    </script>
    <script type="text/javascript">
        // 编辑模板 ↓
        // https://dashboard.emailjs.com/admin/templates
        // user:1351370146@qq.com; password:zhx199702;
        $(function() {            
            $(document).on("click", "#tijiao" , function(e){
                // 电子邮箱服务ID：service_qs3j04u
                // 电子邮箱模板ID：template_8tmjaei
                // FORM标签ID：email-form
                app.zizizi = true;
                emailjs.sendForm('service_0yp0rzm', 'template_8tmjaei', "#email-form")
                .then(function() {
                    console.log('SUCCESS!');
                    app.zizizi = false;
                    app.succesType = true;
                    setTimeout(_=>{
                        app.succesType = false;
                    },2000)
                }, function(error) {
                    console.log('FAILED...', error);
                    app.zizizi = false;
                    app.errorType = true
                    app.errorMsg = error
                    setTimeout(_=>{
                        app.errorType = false;
                    },2000)
                });
            })
        })
    </script>
    <!-- 邮件发送 end -->
</body>

</html>